<template>
  <div class="home">
    <Swipe :swipe="swipe"></Swipe>
    <van-grid :column-num="5">
      <van-grid-item
        class="iconfont icon-geshou"
        to="/home/singer"
        text="歌手"
      />
      <van-grid-item
        class="iconfont icon-paihang"
        to="/home/ranking"
        text="排行"
      />
      <van-grid-item
        class="iconfont icon-icon-category"
        to="/home/classify"
        text="分类歌单"
      />
      <van-grid-item
        class="iconfont icon-ziyuan"
        to="/home/radio"
        text="电台"
      />
      <van-grid-item class="iconfont icon-ting" text="一起听" />
    </van-grid>
    <div class="box">
      <van-card>
        <template #thumb>
          <div>
            <img
              src="../../assets/Screenshot_20210616_101521_com.tencent.qqmusic_ed.jpg"
              alt=""
            />
          </div>
        </template>
        <template #title>
          <div class="title">
            <div>
              <p class="p1">新歌新碟</p>
              <p>何昶希唱响青春</p>
            </div>
            <img src="../../assets/p1.jpg" alt="" />
          </div>
        </template>
        <template #desc>
          <div class="desc">
            <div>
              <p class="p1">数字专辑·票务</p>
              <p>比伯先行新单</p>
            </div>
            <img src="../../assets/p2.jpg" alt="" />
          </div>
        </template>
      </van-card>
    </div>
    <router-link to="/home/classify" class="gengduo">
      <h3>为你推荐歌单</h3>
      <span class="s1">更多 > </span>
    </router-link>
    <van-swipe
      class="tuijian"
      :loop="false"
      :width="140"
      :height="150"
      :show-indicators="false"
    >
      <van-swipe-item v-for="(tui, index) in tuijian1" :key="index">
        <img
          @click="goDetail('/home/songSheet', tui.content_id)"
          v-lazy="tui.cover"
          alt=""
        />
        <p>{{ tui.title }}</p>
      </van-swipe-item>
    </van-swipe>
    <van-swipe
      class="tuijian"
      :loop="false"
      :width="140"
      :height="150"
      :show-indicators="false"
    >
      <van-swipe-item v-for="(tui, index) in tuijian2" :key="index">
        <img
          @click="goDetail('/home/songSheet', tui.content_id)"
          v-lazy="tui.cover"
          alt=""
        />
        <p>{{ tui.title }}</p>
      </van-swipe-item>
    </van-swipe>
    <router-link to="/home/mvlist" class="gengduo">
      <h3>精选视频</h3>
      <span class="s1">更多 > </span>
    </router-link>
    <van-swipe
      class="tuijian"
      :loop="false"
      :width="260"
      :height="150"
      :show-indicators="false"
    >
      <van-swipe-item
        class="mv"
        v-for="(mv, index) in mvList"
        :key="index"
        @click="goDetail('/home/mv', mv.vid)"
      >
        <div class="iconfont icon-sheying">{{ mv.playcnt | num }}</div>
        <img v-lazy="mv.picurl" alt="" />
        <p>
          {{ mv.title }}-
          <span v-for="(name, index) in mv.singers" :key="name.id">
            <span v-if="index > 0">/</span> {{ name.name }}
          </span>
        </p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import Swipe from '../../components/Swipe.vue'
export default {
  data: () => ({
    active: 0,
    swipe: [],
    tuijian1: [],
    tuijian2: [],
    mvList: []
  }),
  methods: {
    async getRecommendBanner() {
      const res = await this.$http.getRecommendBanner()
      this.swipe = res.data.data
    },
    async getMvByTag() {
      const res = await this.$http.getMvByTag()
      this.mvList = res.data.data.list
    },
    async getPlayList() {
      const res = await this.$http.getPlayList()
      res.data.data.list.forEach((el, index) => {
        if (index <= 5) this.tuijian1.push(el)
        else this.tuijian2.push(el)
      })
    }
  },
  created() {
    this.getRecommendBanner()
    this.getMvByTag()
    this.getPlayList()
  },
  components: {
    Swipe
  }
}
</script>
<style lang="less">
body,
html {
  background-color: #f7f8fab6;
  .home {
    padding-left: 5px;
    padding-right: 5px;
    .my-swipe .van-swipe-item {
      color: #fff;
      line-height: 150px;
      text-align: center;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .van-grid {
      box-sizing: border-box;
      margin-top: 20px;
      .iconfont {
        text-align: center;
        &::before {
          color: rgb(61, 209, 140);
        }
        .van-grid-item__content {
          padding: 0;
          background-color: #f7f8fab6;
        }
      }
    }
    .box {
      margin-top: 30px;
      height: 120px;
      background-color: #f7f8fab6;
      .van-card {
        padding-top: 0;
        height: 100%;
        background-color: #f7f8fab6;
        padding: 0;
        .van-card__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .van-card__thumb {
            width: 100px;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .van-card__content {
            height: 120px;
            .title {
              width: 230px;
              height: 48px;
              background-color: white;
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin-top: 10px;
              p {
                margin: 0;
              }
              .p1 {
                font-size: 16px;
              }
              img {
                width: 48px;
                height: 48px;
              }
            }
            .desc {
              width: 230px;
              height: 48px;
              background-color: white;
              margin-top: 4px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              p {
                margin: 0;
              }
              .p1 {
                font-size: 16px;
              }
              img {
                width: 48px;
                height: 48px;
              }
            }
          }
        }
      }
    }
    .gengduo {
      display: flex;
      justify-content: space-between;
      color: black;
      align-items: flex-end;
      margin-top: 20px;
      height: 50px;
      line-height: 50px;
      h3 {
        margin: 0;
      }
      .s1 {
        font-size: 14px;
      }
    }
    .tuijian {
      img {
        border-radius: 10px;
        width: 95%;
        height: 85%;
      }
      p {
        width: 90%;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
      }
    }
    .mv {
      position: relative;
      .iconfont {
        position: absolute;
        right: 35px;
        bottom: 25px;
        color: white;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
      img {
        width: 90%;
        border-radius: 10px;
      }
    }
  }
}
</style>
